﻿@model WhatSales.Models.User
<html>
<head>
    <title></title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="~/Scripts/vue.js" type="text/javascript"></script>
    <script src="~/Scripts/axios.min.js" type="text/javascript"></script>
    <style>
        li {
            list-style: none;
            align-items: center;
            display: flex;
            border-bottom: 1px solid #ffffff;
            justify-content: center;
        }

        span {
            padding-right: 5px;
        }

        .row {
            height: 100px;
            display: flex;
            padding: 0;
        }

        .cart-list {
            background-color: #eee;
        }

        .cart-count {
            width: 26px;
            height: 26px;
            border: 0;
            background-color: #eee;
            font-size: 20px;
            line-height: 20px;
        }

        .cart-info {
            background-color: #eee;
            margin-top: 20px;
        }

        .cart-content {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div>
                <div class="page-header">
                    <a href="/Product/Index" style="text-decoration:none;display:inline-block;"><h1>What Sales<small>电商平台</small></h1></a>
                    <a href="/Order/Cart" style="float:right;cursor:pointer;"><h2 style="display:inline-block;">@Model.UserName</h2><h3 style="display:inline-block;">的购物车</h3></a>
                </div>
                <div class="nav breadcrumb">
                    <div class="left-nav" style="float:left;">
                        <ol class="breadcrumb" style="margin:10px auto;">
                            <li v-for="category in categoryList"><a href="#" v-on:click="FindProductListByCatecoryId(category.id)">{{category.TypeName}}</a></li>
                        </ol>
                    </div>
                    <div class="right-nav" style="float:right;height:56px;">
                        <div class="navbar-form navbar-left" style="margin:10px auto;">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="Search">
                            </div>
                            <input type="button" class="btn btn-default" value="搜索">
                        </div>
                    </div>
                </div>
            </div>
            <div class="cart">
                <div class="cart-list">
                    <ul class="row">
                        <li class="col-md-1"><input type="checkbox" v-on:click="ChooseAllCart" /></li>
                        <li class="col-md-4">商品名称</li>
                        <li class="col-md-2">单价</li>
                        <li class="col-md-2">数量</li>
                        <li class="col-md-2">小计</li>
                        <li class="col-md-1">操作</li>
                    </ul>
                    <ul class="row" v-for="(cart,index) in cartList">
                        <li class="col-md-1"><input type="checkbox" :checked="chooseAll" value="cart.id" /></li>
                        <li class="col-md-4">
                            <a class="cart-content">{{cart.ProductName}}</a>
                        </li>
                        <li class="col-md-2" style="color:red;">{{cart.Price}}元</li>
                        <li class="col-md-2">
                            <button class="cart-count" v-on:click="cart.Count--">-</button>
                            <input type="number" style="width:30px;text-align:center;" :value="cart.Count" />
                            <button class="cart-count" v-on:click="cart.Count++">+</button>

                        </li>
                        <li class="col-md-2" style="color:red;">{{cart.Price*cart.Count}}元</li>
                        <li class="col-md-1"><a href="#" v-on:click="DelCartById(index,cart.id)">X</a></li>
                    </ul>
                </div>
                <div class="cart-info">
                    <ul class="row" style="height:50px">
                        <li class="col-md-3">
                            <span><a href="/Product/index">继续购物</a></span>
                            <span>|</span>
                            <span>已选择{{cartList.length}}件商品</span>
                        </li>
                        <li class="col-md-4 col-md-offset-5">
                            <span>合计(不含运费):</span>
                            <span>9999元</span>
                            <div style="display:inline-block;margin-right:0;"><button class="btn btn-primary btn-lg" style="padding:10px 75px;border-radius:0" v-on:click="GoPay">去结算</button></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            categoryList: [],
            cartList: [],
            chooseAll:false
        },
        methods: {
            DelCartById: function (index,id) {
                axios.post("/Order/DelCartById", { opuId: id })
                .then(function (response) {
                    if (response.data.status == 200) {
                        this.app.cartList.splice(index,1)
                    } else
                        alert("");
                })
                .catch(function (error) {
                    this.app.productList = error
                })
            },
            ChooseAllCart: function () {
                    //点击以后，给全选按钮修改状态，布尔值取反
                    this.chooseAll = !this.chooseAll;
                    //给列表中的每一项同步状态
                    for (var i = 0; i < this.cartList.length; i++) {
                        this.cartList[i].choose = this.chooseAll;
                    }
            },
            GoPay: function () {
                var flag = confirm("默认使用支付包支付，确认么？");
                if (flag == false) {
                    return;
                }
                axios.post("/Order/AddOrder", {
                    "Price":9999
                }).then(function (res) {
                    if (res.data.status == 200) {
                        alert(res.data.msg);
                    }else {
                        alert(res.data.msg);
                    }
                })
                location.href = "/Order/Index";
            },
        },
        created: function () {
            axios.get("/product/FindCategoryList")
                .then(function (response) {
                    app.categoryList = response.data.obj
                })
                .catch(function (error) {
                    app.categoryList = error
                })

            axios.get("/order/FindCartListByUserId")
                .then(function (response) {
                    app.cartList = response.data.obj
                })
                .catch(function (error) {
                    app.cartList = error.data.msg
                })
        }
    })
</script>